<template>
   <div>
     <!-- 头部 -->
    <Header />
      <!-- 幻灯片 -->
      <el-carousel trigger="click" :height="height">
          <el-carousel-item v-for="img in List" :key="img.id">
            <img v-bind:src="img.src" alt="" srcset="">
          </el-carousel-item>
      </el-carousel>  
    <!-- 提交表单 -->
    <div class="login-from">
      <el-form label-position="left" label-width="80px" >
        <el-form-item style="margin-top:20px;margin-bottom:50px;margin-left:-35px">
          <img src="img/login.png"  />
        </el-form-item>
        <el-form-item label="账 号：" class="Item">
          <el-input v-model="loginform.username" placeholder="账 号"></el-input>
        </el-form-item>
        <el-form-item label="密 码："  class="Item">
          <el-input type="password" placeholder="密 码" v-model="loginform.password" autocomplete="off"></el-input>
        </el-form-item>
            <el-button class="button" type="primary" @click="submitForm(loginform)">提交</el-button>
            <el-button class="button" @click="resetForm(loginform)">重置</el-button>
      </el-form>
    </div>
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script>
import { mapState,mapGetters  } from 'vuex'
import Header from '../header/header.vue'
import Footer from '../footer/footer.vue'
import axios from 'axios'

export default {
  components: {
    Header,
    Footer
  },
  data(){
    return {
      loginform: {
        username: 'liujianyin',
        password: '',
      },
      height: "",
      List: [
        {
          id:0,
          src: "img/1.jpg"
        },
        {
          id:1,
          src: "img/2.jpg"
        },
        {
          id:2,
          src: "img/3.jpg"
        },
        {
          id:3,
          src: "img/4.jpg"
        }
      ],
      
    };
  },
  created(){
  　this.windouHeight()
  },
  methods: {
    // {
    //     "username":"liujianyin",
    //     "password":"zxc188520"
    //   },
    windouHeight: function() {
      this.height = window.innerHeight-91 + "px";
    },
    submitForm(loginform) {
      this.$store.dispatch('getLogin',loginform)
    },
    resetForm(data) {
      this.loginform.username = '';
      this.loginform.password = '';
    }
  },
  computed:{
    ...mapState({
      code: (state) => state.login.code
    }),
  }
};
</script>


<style lang="stylus">
.el-carousel{
 margin-top: 51px
}
.Item .el-form-item__label{
        color: #fff;
    }
.el-carousel__item {
  height: 100%;
  margin: 0;
  padding: 0;
}
.el-carousel__item img {
  height: 100%;
  width: 100%;
}
a:link {color: #000;text-decoration:none;}
a:visited {color: #000}
/* a:hover {color: #777777;text-decoration:none;}
a:active {color: #777777;text-decoration:none;} */
.login-from{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 400px;
    width: 350px;
    background: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 3px;
    z-index 2
}
.button{
  margin-top 60px
  width 170px
}
</style>